<template>
  <div class="map-container">
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
export default {
  name: 'Map',
  props: {
    lat: {
      type: Number,
      required: true
    },
    lng: {
      type: Number,
      required: true
    },
    time: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      map: null,
      marker: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new AMap.Map(this.$refs.map, {
        center: [this.lng, this.lat],
        zoom: 8
      })

      // 添加标记
      this.marker = new AMap.Marker({
        position: [this.lng, this.lat],
        map: this.map
      })

      // 添加信息窗口
      this.marker.setLabel({
        offset: new AMap.Pixel(20, -10),
        content: this.time
      })
    }
  }
}
</script>

<style scoped>
.map-container {
  height: 900px;
  width: 100%;
}

.map {
  height: 100%;

}
</style>
